{% extends "base.html" %}
{% load static %}

{% block title %}
	首页
{% endblock title %}

{% block content %}
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item">
					<a href="{% url 'article:article_list' %}?search={{search}}">
						最新
					</a>
				</li>
				<li class="breadcrumb-item">
					<a href="{% url 'article:article_list' %}?order=total_views&searach={{search}}">
						最热
					</a>
				</li>
			</ol>
		</nav>
		<div class="row">
			<div class="col-auto mr-auto">
				<form class="form-inline">
					<label class="sr-only">content</label>
					<input type="text" class="form-control mb-2 mr-sm-2" name="search" placeholder="搜索文章..." required>
				</form>
			</div>
		</div>
		{% if search %}
			{% if articles %}
				<h4><span style="color: red">"{{ search }}"</span>的搜索结果如下:</h4>
				<hr>
			{% else %}
				<h4>暂无<spapn style="color:red">"{{search}}"</spapn>有关的文章</h4>
				<hr>
			{% endif %}
		{% endif %}
		<div class="row mt-2">
			{% for article in articles %}
			<div class="col-12">
				{% if article.column %}
				<button type="button"
					class="btn btn-sm mb-2
						{% if article.column.title == 'Django' %}
							btn-success
						{% elif article.column.title == 'Java' %}
							btn-danger
						{% elif article.column.title == 'HTML' %}
							btn-warning
						{% endif %}
					"
				>
					{{article.column}}
				</button>
				{% endif %}
				<h4>
					<b>
						<a href="{% url 'article:article_detail' article.id %}"
						style="color:black;"
						>
							{{article.title}}
						</a>
					</b>
				</h4>
				<div>
					<p style="color:gray;">
						{{ article.body|slice:'100'}}...
					</p>
				</div>
				<p>
					<span style="color:green;">
						{{article.total_views}}浏览 &nbsp;&nbsp;&nbsp;
					</span>
					<span style="color:blue;">
						{{article.created|date:'Y-m-d'}} 发布&nbsp;&nbsp;&nbsp;
					</span>
					<span style="color:darkred;">
						{{ article.updated|date:'Y-m-d' }} 更新
					</span>"
				</p>
				<hr>
			</div>
			{% endfor %}
		</div>
		<br>
		<br>
		<div class="pagination row" >
			<div class="m-auto">
				<span class="step-links">
					{% if articles.has_previous %}
						<a href="?page=1&order={{order}}&search={{search}}" class="btn btn-success">
							&laquo; 1
						</a>
						<span>...</span>
						<a href="?page={{ articles.previous_page_number }}&order={{order}}&search={{search}}"
							class="btn btn-secondary">
							{{ articles.previous_page_number }}
						</a>
					{% endif %}
	
					<span class="current btn btn-danger btn-lg">
						{{ articles.number }}
					</span>
	
					{% if articles.has_next %}
						<a href="?page={{ articles.next_page_number }}&order={{order}}&search={{search}}"
							class="btn btn-secondary">
							{{ articles.next_page_number}}
						</a>
						<span>...</span>
						<a href="?page={{ articles.paginator.num_pages }}&order={{order}}&search={{search}}"
							class="btn btn-success">
							{{ articles.paginator.num_pages }} &raquo;
						</a>
					{% endif %}
				</span>
			</div>
		</div>
	</div>
	
{% endblock content %}